<template>
  <div>
    <div class="y-managel">
      <!-- 返回 -->
      <div class="y-managel-1">
        <div class="y-managel-back" @click="back()">返回</div>
        <div class="head-span">劳动力计划投入</div>
        <!-- <el-button class="y-btn" @click="gubi()">关闭</el-button>
        <el-button type="primary" class="y-btn1">保存</el-button>-->
      </div>
      <!-- 单位信息 -->
      <div class="y-nav">
        <el-form ref="formName" :model="ruleForm" :rules="rules">
          <div class="y-managel-2">
            <div class="y-managel-2-1">单位信息：</div>

            <!-- input框 -->
            <div class="y-managel-2-2">
              <!-- 第一行 -->
              <el-row class="y-left">
                <el-col :span="8">
                  <el-form-item label="所属阶段" prop="plan_phase">
                    <el-input v-model="ruleForm.plan_phase" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="plan_start">
                    <span>计划用工开始时间</span>
                    <div>
                      <el-date-picker
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        class="padding"
                        v-model="ruleForm.plan_start"
                        type="date"
                        placeholder="选择日期"
                        :disabled="true"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="plan_end">
                    <span>计划用工结束时间</span>
                    <div>
                      <el-date-picker
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="ruleForm.plan_end"
                        class="padding"
                        type="date"
                        placeholder="选择日期"
                        :disabled="true"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第二排 -->
              <el-row class="y-left">
                <el-col :span="8">
                  <el-form-item label="单位名称">
                    <el-input v-model="ruleForm.buildCompany.company_name" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="班组名称">
                    <el-input v-model="ruleForm.buildGroup.group_name" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- </el-form> -->
          <div class="y-managel-4">
            <div class="y-managel-2-1">计划投入人员：</div>
            <div class="y-table">
              <el-table
                :border="true"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                ref="multipleTable"
                :data="currList"
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%, text-align: center "
                @selection-change="handleSelectionChange"
              >
                <!-- 序号 -->
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column label="姓名" prop="people_name" hight="30px" align="center"></el-table-column>
                <el-table-column label="性别" align="center" prop="people_sex"></el-table-column>
                <el-table-column label="工种" align="center" prop="buildJob.job_name"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="allSubmit">
            <!-- <template slot-scope="scope"> -->
            <el-form-item>
              <el-button type="primary" @click="allSubmit('ruleForm')">提交</el-button>
            </el-form-item>
            <!-- </template> -->
          </div>
        </el-form>
        <div class="f-block">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      sendRow: this.$route.params,
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 5,
      tableData: [], //总数据
      multipleSelection: [],
      // 新增框值
      ruleForm:this.$route.params,
      // ruleForm: {
      //   plan_start: "",
      //   plan_end: "",
      //   plan_phase: "",
      //   group_id: "",
      //   company_id: "",
      //   company_name:""
      //   //  addPeopleIds: [], //选中的数据
      // },

      ruleForm2: {
        plan_start: "",
        plan_end: "",
        plan_phase: "",
        group_id: "",
        company_id: "",
      },
      // 新增框的下拉框
      bottom1: [],
      bottom2: [],
      value: "",
      // 表单验证规则
      rules: {
        //  type: [{ validator: validateDanWeiName, trigger: 'blur' }],
        // username: [{ validator: validateusername, trigger: "blur" }],
        // Name: [{ validator: validateidcard, trigger: 'blur' }],
        // name: [
        //   { required: true, message: "请输入活动名称", trigger: "blur" },
        //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        // ],
        // region: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
        // date1: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change",
        //   },
        // ],
        // date2: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change",
        //   },
        // ],
        // type: [
        //   {
        //     type: "array",
        //     required: true,
        //     message: "请至少选择一个活动性质",
        //     trigger: "change",
        //   },
        // ],
      },
      //   日期
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      // },
      value1: "",
      value2: "",
    };
  },
  methods: {
    // 提交表格选择数据
    allSubmit(ruleForm) {
      let newruleForm={}
      newruleForm.plan_id=this.ruleForm.plan_id
      console.log("参数this.tableData", this.multipleSelection);
      // peopleid数组
      let addPeopleIds = this.multipleSelection.map((item, index, arr) => {
        return item.people_id;
      });
      let delPeopleIds=[]
      // let delPeopleIds = this.multipleSelection.map((item, index, arr) => {
      //   return item.people_id;
      // });
      console.log("这是", addPeopleIds);
      console.log("删除", delPeopleIds);

      newruleForm.addPeopleIds = addPeopleIds;
     newruleForm.delPeopleIds = delPeopleIds;
      console.log("参数this.ruleForm", this.ruleForm);
      http.updBuildPlanPeople(newruleForm).then((r) => {
        console.log("提交", r);
        // this.tableData = r.data;
        // this.setCurrList(1);
        // console.log("表格", this.tableData);
        // this.setCurrList(1)
      });
    },

    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(val);
    },
    // 返回
    back() {
      this.$router.push({
        name: "劳动力计划投入",
      });
    },
    gubi() {
      this.$router.push({
        name: "劳动力计划投入",
      });
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    //选中复选框获取下标
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleEdit(){
      
    }
  },
  //获取数据
  mounted() {
    console.log(this.ruleForm,'this.ruleForm')
    //  获取前一个表格的数据
    http.getBuildPlanList({ plan_id: this.sendRow.plan_id }).then((r) => {
      console.log(r);
      this.ruleForm = r.data[0];
      // this.bottom1 = r.data;
      // console.log("公司", this.bottom1);
    });
    // console.log("这是接收的",this.sendRow)
    // 获取表格信息
    http.ryglxmbzRen({ group_id: this.ruleForm.group_id }).then((r) => {
      console.log("表格", r);
      this.tableData = r.data;
      this.setCurrList(1);
      // this.ruleForm = r.data[0];
      // this.bottom1 = r.data;
      // console.log("公司", this.bottom1);
    });
  },
};
</script>
<style scoped>
.el-input >>> .el-input__inner {
  width: 260px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 260px !important;
  height: 30px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 259px;
}
.el-row {
  width: 1150px;
}
.y-left {
  margin-left: 60px;
}
.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.y-managel {
  /* margin-top: 20px; */
  /* margin-left: 20px; */
  width: 100%;
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.y-managel-1 {
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
}
.y-managel-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.y-managel-2 {
  width: 100%;
  /* height: 290px; */
  background: white;
  margin-top: 20px;
  /* padding-left: 20px; */
}
.y-managel-3 {
  width: 1200px;
  /* height: 160px; */
  /* background: lawngreen; */
  margin-top: 20px;
  /* padding-left: 20px; */
}
.y-managel-4 {
  width: 100%;
  height: 450px;
  background: white;
  margin-top: 20px;
}
.y-managel-2-1 {
  /* height: 50px; */
  line-height: 50px;

  margin-left: 10px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.y-table {
  /* width: 95%; */
  margin-top: 20px;
  /* margin-left: 8px; */
  /* height: 180px; */
  /* background: red; */
}
.y-managel-3-1 {
  /* height: 50px; */
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.dang {
  margin-top: 40px;
}

.y-managel-3 {
  width: 1200px;
  /* height: 182px; */
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.p-1 {
  position: relative;
}
.put1 {
  position: absolute;
  top: 45px;
}
.el-input__icon >>> .el-icon-date {
  line-height: 34px !important;
}
.fonter {
  width: 100%;
  /* height: 100px; */
  background: #ffff;
  position: relative;
}
/* .y-btn {
  height: 30px;
  position: absolute;
  right: 100px;
  top: 10px;
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  line-height: 0px;
} */
/* .y-btn1 {
  height: 30px;
  position: absolute !important;
  right: 0px;
  top: 10px;
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  line-height: 0px;
} */
.f-fenye {
  float: right;
  margin-top: -55px;
  margin-right: 15px;
}
.allSubmit {
  margin-left: 10px;
  margin-top: 10px;
}

.f-block {
  margin-left: 80%;
  margin-top: -55px;
  z-index: 999;
}
</style>